<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions'%>
<script type="text/javascript">
$(document).ready(function() { 
	  if(document.getElementById('erreurImage').innerHTML != ''){
		  afficherFormulaireUpload();
	  }
	  if(document.getElementById('imageUpload').src != ''){
		  afficherFormulaireUpload();
	  } 
});

function afficherFormulaireUpload(){
	afficher('formulaire_ajout_image');
	afficher('lien_masquer');
	masquer('lien_upload');
}

function masquerFormulaireUpload(){
	afficher('lien_upload');
	masquer('lien_masquer');
	masquer('formulaire_ajout_image');
}

function afficher(nom)
{   
    document.getElementById(nom).style.display='block';   
}
function masquer(nom)
{   
    document.getElementById(nom).style.display='none';   
}
</script>
<c:choose>
<c:when test="${empty sachantSession}">
	<p class="error">Vous n'avez pas les droits suffisant pour afficher cette page</p>
</c:when>
<c:otherwise>
	<h4>Saisie d'une question</h4>
	
	
	<c:if test="${!empty erreurs }">
	<c:forEach var="message" items="${erreurs}" >
	<ul>
	<li class="error">${message}</li>
	</ul>
	</c:forEach>
	<p></p>
	</c:if>
	
	<form action="SaisirQuestion" method="post">
		<div>
			<h5>Veuillez sélectionner un chapitre*</h5>
			<span class="error">${erreurSaisieQCM.get("erreurChoixChapitres")}</span>
			<table border="1" class="tableau">
				<tr align="center">
					<th>Sélection</th>
					<th>Nom Chapitre</th>
					<th>Code Chapitre</th>

				</tr>
				<c:forEach var="chapitre" items="${listeChapitres}">
					<tr align="left">
						<td align="center"><input type="radio" name="choixChapitre"
							value="${chapitre.id}" ${choixChapitre == chapitre.id? 'checked="checked"' : '' }></td>
						<td>${chapitre.nom}</td>
						<td>${chapitre.code}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<label>Libellé de la question :</label>
		<textarea name="libelle">${param.libelle}</textarea>
		<p></p>
		
		<label>Niveau de difficulté :</label>
		<select name="niveauDifficulte">
		<c:forEach items="${niveauDifficulte}" var="niveauDifficulte">
		<option value="${niveauDifficulte}" ${param.niveauDifficulte==niveauDifficulte ? ' selected="selected" ' : '' }>${niveauDifficulte}</option>
		</c:forEach>
		</select>
		<p></p>
		
		<label>Coefficient de la question :</label>
		<input type="text" value="${empty param.coefficient? '1.0':param.coefficient}" name="coefficient" size="3"/>
		<p></p>
		<%-- <label>Etat de la question de la question :</label>
		<select value="${param.estActif}" name="estActif">
		<option value="False" selected="selected">Inactive</option>
		<option value="True">Active</option>
		</select>--%>
		<input type="submit" value="Valider et saisir les propositions" class="btn btnSuivant">

	</form>
	<p />
	<a onclick="afficher('formulaire_ajout_image');afficher('lien_masquer');masquer('lien_upload');" id="lien_upload" style="display:block;">Uploader une image</a>
	<a onclick="afficher('lien_upload');masquer('lien_masquer');masquer('formulaire_ajout_image');" id="lien_masquer" style="display:none;">Masquer cette fenêtre</a>
	
	<div id="formulaire_ajout_image" style="display:none;">
	<form class="formulaire" action="${context.getServletContext()}SaisirQuestion?action=uploadImage" enctype="multipart/form-data" method="post">
		
		<p>
			<input type="file" class="btn" name="fileName" /> <input type="submit" class="btn"
				value="Envoyer" />
				<!-- erreur image -->
				<span id="erreurImage">${erreurImage}</span>
		</p>
		
		<!-- si l'image a bien été uploadé -->
		<c:if test="${not empty srcImage }">
			<p>
			<b>${srcImage}</b>
			</p>
			<img id="imageUpload" src="${srcImage}" width="150"/>
		</c:if>
		<p>Infos: les images doivent être de type png ou jp(e)g ou gif </p>
	</form>
	</div>
</c:otherwise>
</c:choose>